<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { Loading, Icon } from 'vant'

interface ThinkingProps {
  thinking: boolean;
  content: string;
  time: number;
  done: boolean;
}

const props = defineProps<ThinkingProps>()

const expanded = ref(true)
const hasContent = computed(() => props.content && props.content.trim() !== '')

watch(() => props.done, (newVal) => {
  if (newVal) {
    expanded.value = false
  }
})

const toggleExpand = () => {
  expanded.value = !expanded.value
}
</script>

<template>
  <div v-if="hasContent" class="thinking-process">
    <div class="thinking-header" @click="toggleExpand">
      <template v-if="thinking">
        <div class="thinking-status thinking">
          <Loading size="16px" type="spinner" color="#4080ff" />
          <span>正在深度思考中</span>
        </div>
        <Icon name="arrow-down" class="arrow-icon" :class="{ 'arrow-expanded': expanded }" />
      </template>
      <template v-else>
        <div class="thinking-status done">
          <Icon name="success" color="#52c41a" />
          <span>已深度思考{{ time ? `（用时${time}秒）` : '' }}</span>
        </div>
        <Icon name="arrow-down" class="arrow-icon" :class="{ 'arrow-expanded': expanded }" />
      </template>
    </div>
    
    <transition name="slide-fade">
      <div v-show="expanded" class="thinking-content">
        {{ content }}
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.thinking-process {
  width: 100%;
  padding: 0;
  margin-bottom: 0;

  .thinking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 8px;
    
    &:hover {
      background-color: transparent;
    }
    
    .thinking-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 16px;
      
      &.thinking {
        color: #4080ff;
        background-color: rgba(64, 128, 255, 0.08);
      }
      
      &.done {
        color: #52c41a;
        background-color: rgba(82, 196, 26, 0.08);
      }
    }
    
    .arrow-icon {
      transition: transform 0.3s ease;
      transform: rotate(0deg);
      color: #999;
    }
    
    .arrow-expanded {
      transform: rotate(180deg);
    }
  }
  
  .thinking-content {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 10px;
    white-space: pre-wrap;
    overflow: hidden;
    border-left: 3px solid #4080ff;
  }
  
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    transition: all 0.3s ease;
    max-height: 1000px;
  }
  
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
